<template>
    <div class="footer-box">
      <div class="foot-nav">
        <a href="">ABOUT US</a>
        <a href="">PRODUCT</a>
        <a href="">COLLECTIONS</a>
        <a href="">EXHIBITIONS</a>
        <a href="">NEWS</a>
        <a href="">CONTACT</a>
      </div>
      <ul class="footer-bottom">
        <li class="tab1">
          <div class="search">
            <i></i>
            <input type="text">
            <a href="javascript:;">SEARCH</a>
          </div>
          <h2>©  Wenzhou Kirka Eyewear 2019</h2>
        </li>
        <li class="tab2">
          <div>
            <h2><i class="email"></i>E-mail：amoo@kirkaeyewear.com </h2>
            <h2><i class="phone"></i>Tel：0086-577-86380982 </h2>
          </div>
        </li>
        <li class="tab3">
          <h2>FOLLOW US</h2>
          <div>
            <a href="javascirpt:;">
              <img src="~image/footer-bottom-1.jpg">
            </a>
            <a href="javascirpt:;">
              <img src="~image/footer-bottom-2.jpg">
            </a>
            <a href="javascirpt:;">
              <img src="~image/footer-bottom-3.jpg">
            </a>
            <a href="javascirpt:;">
              <img src="~image/footer-bottom-4.jpg">
            </a>
          </div>
        </li>
      </ul>
    </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  props: {

  },
  created() {

  },
  computed: {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
.footer-box{
}
  .foot-nav{
    .padding(40,0);
    .lh(52);
    text-align: center;
    a{
      display: inline-block;
      color:#333;
      .fs(24);
      .padding(0,35);
      -webkit-transition: all .3s;
      transition: all .3s;
      &:hover{
        color:#dd3333;
      }
    }
  }
  .footer-bottom{
    border-top:1px solid #D6D6D6;
    .pt(40);
    .pb(40);
    overflow: hidden;
    li{
      float:left;
      width:33.33%
    }
    .tab1{
      .search{
        border:2px solid #dd3333;
        width:290px;
        height:34px;
        // .w(290);
        // .h(34);
        margin:0 auto;
        .mt(20);
        .mb(24);
        .flexwrap();
        i{
          float: left;
          width:30px;
          height:30px;
          // .w(30);
          // .h(30);
          background:url(~image/footer-bottom-search.png) center center no-repeat;
        }
        input{
          .flexcon();
          height:30px;
          line-height:30px;
          padding-right:10px;
          // .h(28);
          // .lh(28);
          // .pr(10);
        }
        a{
          float: left;
          padding:0 10px;
          height:30px;
          line-height:30px;
          text-align: center;
          color:#fff;
          font-size:14px;
          background: #dd3333;
        }
      }
      h2{
        font-size:16px;
        text-align: center;
      }
    }
    .tab2{
      &>div{
        margin:0 auto;
        width:300px;
      }
      h2{
        height:30px;
        line-height:30px;
        overflow: hidden;
        font-size:16px;
        &:first-child{
          margin-bottom:10px;
          margin-top:20px;
        }
        i{
          float: left;
          width:30px;
          height:30px;
          margin-right:10px;
          &.email{
            background:url(~image/footer-bottom-mail.png)  no-repeat;
            background-size:cover;
          }
          &.phone{
            background:url(~image/footer-bottom-phone.png)  no-repeat;
            background-size:cover;
          }
        }
      }
    }
    .tab3{
      text-align: center;
      h2{
        margin-bottom:15px;
        font-size:16px;
      }
      a{
        display: inline-block;
        width:52px;
        height:52px;
        margin:0 12px;
        img{
          width:100%;
          height:100%;
        }
      }
    }
  }
  @media screen and (max-width: 1000px) {
    .footer-bottom{
      li{
        float:left;
        width:100%;
      margin-bottom:40px;
      }
      .tab1{
      margin-bottom:40px;
      }
      .tab2{
        h2{
          &:first-child{
            .mt(0);
          }
        }
      }
    }
  }
@media screen and (max-width: 500px) {
  .foot-nav{
    a{
      font-size:12px;
    }
  }
  .footer-bottom{
    li{
      float:left;
      width:100%;
      margin-bottom:40px;
    }
    .tab1{
      margin-bottom:40px;
      .search{
        border:1px solid #dd3333;
        width:240px;
        height:30px;
        margin:0 auto;
        .mt(20);
        .mb(24);
        .flexwrap();
        i{
          float: left;
          width:28px;
          height:28px;
          background:url(~image/footer-bottom-search.png) center center no-repeat;
        }
        input{
          .flexcon();
          height:28px;
          line-height:28px;
          padding-right:10px;
        }
        a{
          float: left;
          padding:0 10px;
          height:28px;
          line-height:28px;
          text-align: center;
          color:#fff;
          font-size:12px;
          background: #dd3333;
        }
      }
      h2{
        font-size:12px;
      }
    }
    .tab2{
      &>div{
        width:260px;
      }
      h2{
        font-size:12px;
        height:20px;
        line-height:20px;
        &:first-child{
          .mt(0);
        }
        i{
          width:20px;
          height:20px;
        }
      }
    }
    .tab3{
      h2{
        font-size:12px;
        margin-bottom:20px;
      }
      a{
        display: inline-block;
        width:34px;
        height:34px;
        margin:0 15px;
        img{
          width:100%;
          height:100%;
        }
      }
    }
  }
}
</style>
